<template>
  <div class="full-box d-flex">
    <div class="flex-1 overflow-hidden">
      <BKChart :option="option1" />
    </div>
    <div class="flex-1 overflow-hidden">
      <BKChart :option="option2" />
    </div>
    <div class="flex-1 overflow-hidden">
      <BKChart :option="option3" />
    </div>
  </div>
</template>

<script>
import { getPieChart } from '../utils/common-func'
export default {
  props: {
    detail: {
      type: Object,
      default: () => null
    }
  },
  data () {
    return {
      option1: {},
      option2: {},
      option3: {}
    }
  },
  watch: {
    detail: {
      handler () {
        if (this.detail) {
          this.handleData()
        }
      }
    }
  },
  methods: {
    handleData () {
      console.log(this.detail?.datasourceStats)
      if (this.detail?.datasourceStats) {
        const { dbTypeList, fileTypeList, infeList } = this.detail?.datasourceStats

        if (dbTypeList?.length) {
          let sum = 0
          const list = dbTypeList.map(ele => {
            sum += ele.num
            return { name: ele.dbType, value: ele.num }
          })
          console.log(sum)
          this.option1 = getPieChart({ data: list, title: '数据库', sum: sum.toString() })
        }
        if (fileTypeList?.length) {
          let sum = 0
          const list = fileTypeList.map(ele => {
            sum += ele.num
            return { name: ele.fileType, value: ele.num }
          })
          console.log(sum)
          this.option2 = getPieChart({ data: list, title: '文件数据源', sum: sum.toString() })
        }
        if (infeList?.length) {
          let sum = 0
          const list = infeList.map(ele => {
            sum += ele.num
            return { name: '', value: ele.num }
          })
          console.log(sum)
          this.option3 = getPieChart({ data: list, title: '接口数据源', sum: sum.toString() })
        }
      }
    }
  }
}
</script>
